<template>
  <!-- 总 -->
  <div class="box">
    <!-- 左侧背景图 -->
    <div class="img"></div>
    <!-- 右侧盒子 -->
    <div class="box1">
      <!-- 图标 -->
      <div class="img1"></div>
      <!-- 表单 -->
      <el-form :model="list" class="box2" ref="ruleFormRef" :rules="rules">
        <el-form-item  prop="username" >
          <el-input v-model="list.username" :prefix-icon="User" placeholder="账号" />
        </el-form-item>
        <el-form-item  prop="password">
          <el-input  v-model="list.password" :prefix-icon="Lock" type="password" placeholder="密码" show-password="true" />
        </el-form-item>
        <el-form-item  prop="code">
          <el-input v-model="list.code" class="iupt" :prefix-icon="Key" placeholder="验证码" />
          <div class="box3">
            <img src="./assets/3b09686b89b5b10c0ef94f7e67f3ff4d_.png" class="img2"/>
          </div>
        </el-form-item>
        <el-form-item >
          <button class="default" >立即登录</button>   
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Lock,User,Key,View } from '@element-plus/icons-vue'
import { reactive,ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'

const list=ref({
  username:'',
  password: '',
  code:''
})

const rules = reactive({
username:[
  {required: true, message: '账号不能为空', trigger: 'blur'},
  { min: 3, max: 5, message: '账号三位到五位', trigger: 'blur' },
],
password:[
  {required: true, message: '密码不能为空', trigger: 'blur'},
  { min: 6, max: 8, message: '密码六位到八位', trigger: 'blur' },
],
code:[
  {required: true, message: '验证码不能为空', trigger: 'blur'},
],

})

</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1209px;
  height: 940px;
  background-image: url("./assets/微信图片_20230109203833.png");
  background-size: cover;
}
.box1 {
  position: absolute;
  top: 207px;
  right: 118px;
  width: 463px;
  height: 440px;
}
.img1 {
  position: absolute;
  top: 0;
  right: 110px;
  width: 266px;
  height: 55px;
  background-image: url("./assets/e40d4f12fd11ab3f72ff9a0ea910ac33_.png");
}
.box2{
margin-top: 100px;
  
}
:deep(.el-input__inner) {
width: 100%;
height: 54px;

}

.img2{
  width: 145px;
  height: 42px;
}
.iupt{
  width: 310px;
}
.default{
  margin-top: 50px;
  width: 463px;
  height: 54px;
  border-radius: 5px;
  background-image: linear-gradient(to right, rgb(217, 46, 44), rgb(248, 110, 43));
  color: #fff;
  font-size: 20px;

}
</style>
